<template>
	<view class="content">
		<view class="order-tab">
			<view class="tab-item" :class="{on: type === item.type}" @click="typeclick(item.type)" v-for="(item,index) in navbar" :key="index">{{item.name}}</view>
		</view>
		
		<view class="list" v-show="type === 1">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="top-par">
					<view class="num">
						订单编号：{{item.sn}}
					</view>
				</view>
			
				<view class="mid-par">
					<view class="o-list">
						<view class="o-item">
			
							<view class="img"
								:style="{background:item.thumbnail?('url('+baseUrl+ item.thumbnail +') center no-repeat'):'',backgroundSize:'cover'}">
			
							</view>
							<view class="int">
								<view class="t1">
									{{item.name}}
								</view>
								<view class="t2">
									重量：{{item.weight}}G
								</view>
								<view class="t3">
									¥ {{item.price}}
								</view>
							</view>
							<view class="cp-num">
								x {{item.quantity}}
							</view>
						</view>
			
					</view>
				</view>
			
				<view class="order-btn">
					<!-- <navigator class="btn" :url="'/pages/order/comment?sn=' + item.sn + '&id=' + item.id">评价</navigator> -->
					<view class="btn"  @click="goComment(item.sn, item.id)">评价</view>
				</view>
			
			</view>
		</view>
		<view class="list" v-show="type === 2">
			<view class="item" v-for="(item,index) in list1" :key="index">
				<view class="top-par">
					<view class="num">
						评价日期：{{item.createdDate}}
					</view>
				</view>
				<view class="intro" v-if="item.content !== ''">{{item.content}}</view>
				<view class="images" v-if="item.imageList && item.imageList.length > 0">
				    <image v-for="(i,index1) in item.imageList" :key="index1" :src="baseUrl + i" alt=""></image>
				</view>
				<view class="mid-par">
					<view class="o-list">
						<view class="o-item">
							<view class="img"
								:style="{background:item.product.image.thumbnail?('url('+baseUrl+ item.product.image.thumbnail +') center no-repeat'):'',backgroundSize:'cover'}">
							</view>
							<view class="int">
								<view class="t1">
									{{item.product.name}}
								</view>
								<view class="t2">
									重量：{{item.product.weight}}G
								</view>
							</view>
							<view class="cp-num">
							</view>
						</view>
			
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		reviewList, reviewedList
	} from '@/api/user.js'
	export default {
		data() {
			return {
				page: 1,
				navbar: [{
					type: 1,
					name: '待评价'
				}, {
					type: 2,
					name: '已评价'
				}],
				type: 1,
				list: [],
				list1: [],
				baseUrl: this.$baseUrl,
			}
		},
		onReachBottom() {
			this.page++
			uni.showLoading({
				title: '加载中...'
			})
			setTimeout(() => {
				if(this.type === 1) {
					this.init()
				} else {
					this.initData()
				}
				uni.hideLoading()
			}, 800)
		},
		onShow() {
			this.page = 1
			this.list = []
			this.init()
		},
		methods: {
			typeclick(type) {
				this.page = 1
				this.list = []
				this.list1 = []
				this.type = type
				if(type === 1) {
					this.init()
				} else {
					this.initData()
				}
			},
			goComment(sn, id) {
				uni.navigateTo({
					url: '/pages/comment/comment?sn=' + sn + '&id=' + id
				})
			},
			init() {
				reviewList({hasReview: true, pageNumber: this.page}).then(res => {
					res.data.page.forEach(r => {
						r.orderItem.forEach(i => {
							i.sn = r.sn
							this.list.push(i)
						})
					})
				})
			},
			initData() {
				reviewedList({pageNumber: this.page}).then(res => {
					res.data.page.forEach(r => {
						if(r.images !== '') {
							r.imageList = r.images.split(';')
							if(r.imageList.length > 1) {
								r.imageList.splice(r.imageList.length - 1, 1)
							}
						}
						this.list1.push(r)
					})
				})
			}
		}
	}
</script>

<style lang="scss">
page {
		background-color: #f5f5f5;
	}

	.order-tab {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		padding: 0 30rpx;

		.tab-item {
			position: relative;
			padding: 35rpx 0;
			font-size: 24rpx;
		}

		.tab-item.on::before {
			position: absolute;
			content: '';
			width: 100%;
			height: 5rpx;
			bottom: 0;
			background-color: #b81c22;
		}
	}
	
	.list {
			.item {
				background-color: #fff;
				padding: 30rpx;
				margin-bottom: 30rpx;
	
				.top-par {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 24rpx;
					margin-bottom: 30rpx;
	
					.num {
						color: #595757;
					}
	
					.tag {
						color: #b81c22;
					}
				}
	
				.mid-par {
					.o-list {
						.o-item {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-bottom: 30rpx;
	
							.img {
								width: 160rpx;
								height: 160rpx;
							}
	
							.int {
								flex: 1;
								padding: 0 30rpx;
	
								.t1 {
									font-size: 24rpx;
									color: #1a1a1a;
									margin-bottom: 20rpx;
								}
	
								.t2 {
									font-size: 28rpx;
									color: #898989;
									margin-bottom: 45rpx;
								}
	
								.t3 {
									color: #898989;
									font-size: 28rpx;
								}
							}
	
							.cp-num {
								font-size: 28rpx;
								color: #898989;
							}
						}
	
						.pay-num {
							text-align: right;
							color: #1a1a1a;
							font-size: 24rpx;
							padding-bottom: 30rpx;
							border-bottom: 1px solid #f0f0f0;
						}
					}
				}
	
				.order-btn {
					margin-top: 30rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
	
					.btn {
						width: 180rpx;
						height: 60rpx;
						line-height: 57rpx;
						text-align: center;
						background-color: #ffffff;
						border: solid 1px #000000;
						margin-left: 15rpx;
						font-size: 24rpx;
						color: #1b1b1b;
						letter-spacing: 3rpx;
					}
					
					.btn.pay {
						color: #b81c22;
						border: solid 1px #b81c22;
					}
				}
	
	
			}
		}
		
	.intro {
		padding: 0 0 10rpx;
		line-height: 1.6;
	}
	.images {
		margin-bottom: 20rpx;
	}
	.images image {
		width: 180rpx;
		height: 180rpx;
		margin: 0 10rpx 10rpx 0;
	}
</style>
